<template>
    <div class="payment-page">
        <div class="card">
            <div class="card-header">
                <span>现场缴费</span><br>
                输入学号:
                <input
                    v-model.number="stu_ID"
                    id="stu_ID"
                    type="number"
                    placeholder="输入学号"

                /><br>
                <button @click="findAll">查询信息</button>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="column">
                        <div class="fee-card">
                            <div class="fee-card-header">
                                <span>学费</span>
                            </div>
                            <div class="fee-card-body">
                                <p v-if="paymentData.tution_method === 0">当前费用: {{tuition}} 元</p>
                                <button v-if="paymentData.tution_method === 0" @click="payTution">缴费</button>
                                <p v-else>学费已缴费</p>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="fee-card">
                            <div class="fee-card-header">
                                <span>代收费</span>
                            </div>
                            <div class="fee-card-body">
                                <p v-if="paymentData.agency_fee_method === 0">当前费用: {{agency_fee}} 元</p>
                                <button v-if="paymentData.agency_fee_method === 0" @click="payAgency">缴费</button>
                                <p v-else>代收费已缴费</p>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="fee-card">
                            <div class="fee-card-header">
                                <span>住宿费</span>
                            </div>
                            <div class="fee-card-body">
                                <p v-if="paymentData.hotel_expense_method === 0">当前费用: {{hotel_expense}} 元</p>
                                <button v-if="paymentData.hotel_expense_method === 0" @click="payHotel">缴费</button>
                                <p v-else>住宿费已缴费</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    /* Payment Page Styles */
.payment-page {
    padding: 20px;
    background-color: #f9f9f9;
}

.card {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 8px;
}

.card-header {
    background-color: #409eff;
    color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-radius: 8px 8px 0 0;
}

.card-body {
    padding: 20px;
}

.error-message {
    color: red;
    font-weight: bold;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.column {
    flex: 1;
    min-width: 250px;
}

.fee-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    background-color: #f9f9f9;
}

.fee-card-header {
    font-size: 16px;
    margin-bottom: 10px;
    color: #409eff;
}

.fee-card-body p {
    margin: 10px 0;
    font-size: 14px;
}

button {
    padding: 10px 20px;
    background-color: #409eff;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #66b1ff;
}
</style>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
    name: 'PaymentPage',
    data() {
        return {
            //id
            stu_ID: 1,
            //学费
            tuition:10000,
            //代收费
            agency_fee :2000,
            //住宿费
            hotel_expense:3000,
            //绿色通道
            green_channel:1,
            tution_method:0,
            agency_fee_method:0,
            hotel_expense_method:0,
            //是否返校
            registeration:1,
            // 用于存储从后端获取的支付信息
            paymentData: {},
            errorMessage: '', // 错误信息
            error: '', // 确保定义 error 属性
        };
    },
    mounted() {

    },
    methods: {
        findAll() {
            //
            if (this.stu_ID === null || this.stu_ID <= 0) {
                this.errorMessage = '请输入有效的学号';
                this.paymentData = {}; // 清空之前的支付数据
                return;
            }
            //
            // this.errorMessage = ''; // 清空错误信息
            const findByIdRequest = {
                stu_ID: this.stu_ID
            }
            request.post("/regis/id", findByIdRequest)
                .then(res => {
                    console.log(res.data);

                        console.log(res.data);
                        this.paymentData = res.data.data; // 从响应中获取 data 属性
                        this.updateLocalData(); // 更新本地数据属性
                        this.error = ''; // 清除错误信息
                })
                .catch(err => {

                    this.error = '学号错误，请重新输入'; // 设置错误信息
                    this.showError(this.error);
                    this.paymentData = {}; // 清空 paymentData
                    console.error("Network error:", err); // 处理网络错误
                });
        },
        updateLocalData() {
            // 从 paymentData 更新本地数据属性
            this.tuition = this.paymentData.tuition;
            this.agency_fee = this.paymentData.agency_fee;
            this.hotel_expense = this.paymentData.hotel_expense;
            this.green_channel = this.paymentData.green_channel;
            this.tution_method = this.paymentData.tution_method;
            this.agency_fee_method = this.paymentData.agency_fee_method;
            this.hotel_expense_method = this.paymentData.hotel_expense_method;
            this.registeration = this.paymentData.registeration;
        },
        payTution() {
            const cgtuition = {
                stu_ID: this.stu_ID,
                tution_method: this.tution_method
            }
            request.post("/regis/offline", cgtuition)
                .then(res => {
                    console.log(res.data);
                    Message.success({
                        message: '缴费成功',
                        duration: 3000
                    });
                })
                .catch(err => {
                    this.showError('操作失败，请稍后再试'); // 显示具体错误信息
                    console.error("Network error:", err); // 处理网络错误
                });
            // 跳转到缴费成功页面
            this.$router.push('/paymentSuccess');
        },
        payAgency() {
            const cgagency = {
                stu_ID: this.stu_ID,
                agency_fee_method: this.agency_fee_method
            }
            request.post("/regis/offline", cgagency)
                .then(res => {
                    console.log(res.data);
                    Message.success({
                        message: '缴费成功',
                        duration: 3000
                    });
                })
                .catch(err => {
                    this.showError('操作失败，请稍后再试'); // 显示具体错误信息
                    console.error("Network error:", err); // 处理网络错误
                });
            // 跳转到缴费成功页面
            this.$router.push('/paymentSuccess');
        },
        payHotel() {
            const cghotel = {
                stu_ID: this.stu_ID,
                hotel_expense_method: this.hotel_expense_method
            }
            request.post("/regis/offline", cghotel)
                .then(res => {
                    console.log(res.data);
                    Message.success({
                        message: '缴费成功',
                        duration: 3000
                    });
                })
                .catch(err => {
                    this.showError('操作失败，请稍后再试'); // 显示具体错误信息
                    console.error("Network error:", err); // 处理网络错误
                });
            // 跳转到缴费成功页面
            this.$router.push('/paymentSuccess');
        },
        showError(str) {
            // 触发错误提示
            Message.error({
                message: str,
                duration: 3000 // 持续时间为3000毫秒（3秒）
            });
        },
    },



};
</script>
